<template>
  <div class="login">
    <Navbar>
      <div slot="center">用户登录</div>
    </Navbar>

    <!-- 表单 -->
    <div class="form">
      <van-form @submit="onSubmit">
        <van-field
          v-model.trim="username"
          name="username"
          label="账号"
          placeholder="请输入账号"
          class="username"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model.trim="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>

    <!-- 跳转到注册页面 -->
    <p class="go_register">您现在还不是会员?<span class="regester_now" @click="$router.push('/register')" >立即注册</span>
    </p>
  </div>
</template>

<script>
import Navbar from "../../components/navbar/NavBar";
import { reqLogin } from "../../api/login";
export default {
  name: "loginPage",
  data() {
    return {
      username: "admin12",
      password: "admin"
    };
  },
  methods: {
    async onSubmit(values) {
      const result = await reqLogin(values);
      console.log(result);
      if (result.code === 200) {
        const loginInfo = result;
        this.$toast(result.msg);
        this.$store.dispatch("save_loginUser", loginInfo)
        if (this.$route.query.redirect) {
          //如果存在参数
          let redirect = this.$route.query.redirect;
          this.$router.replace(redirect); //则跳转至进入登录页前的路由
        } else {
          this.$router.replace("/"); //否则跳转至首页
        }
      } else {
        this.$toast(result.msg);
      }
    }
  },
  components: {
    Navbar
  }
};
</script>
<style lang="less" scoped>
.login {
  height: 100vh;
  background-color: #eee;
  .form {
    padding: 60px 10px;
    .username {
      margin-top: 10px;
    }
    .van-button--default {
      color: #fff;
      background-color: #02a774;
      border: 1px solid #ebedf0;
    }
  }
  .go_register {
      text-align: center;
      font-size: 13px;
      .regester_now {
        color: red;
        font-weight: bolder;
        margin-left: 15px;
      }
    }
}
</style>
